<template>
  <div  style="overflow: hidden;" @click.stop="hidePopOver" class="navigation-wrap-panel">
    <nav-home ref="navhome"
              v-if="isHighSecurity  && !showMobileEntry"
              :hasManagerAC="hasManagerAC"
              :isSubAdmin="isSubAdmin"
              :currentAppId="currentAppId"
              :currentNavId="currentNavId"
              :isYijingCloud="isYijingCloud"
              :isYijingStandard="isYijingStandard"
    ></nav-home>
    <el-tabs v-else v-model="activeName" @tab-change="handleNavTabClick">
      <nav-home ref="navhome"
                  :hasManagerAC="hasManagerAC"
                  :isSubAdmin="isSubAdmin"
                  :currentAppId="currentAppId"
                  :currentNavId="currentNavId"
                  :isYijingCloud="isYijingCloud"
                  :isYijingStandard="isYijingStandard"
        ></nav-home>
      <!-- <el-tab-pane :label="$t('移动端入口')" name="second" :lazy="true">
        <mobile-home ref="mobilehome" v-if="currentAppId==''"
                     :haveWorkbenchCmd="haveWorkbenchCmd"
                     :isYijingCloud="isYijingCloud"
                     :isYijingStandard="isYijingStandard"
                     :isYijingPortal_4="isYijingPortal_4"
                     :isYijingWPS="isYijingWPS"
                     :showUseCustomMenuSwitch="showUseCustomMenuSwitch"
        ></mobile-home>
        <div :style="{height:appResourceHeight}" v-if="currentAppId!=''">
          <app-resource v-if="currentAppId!=''" @refreshList="refreshAppList" ref="appResource"
                        :haveWorkbenchCmd="haveWorkbenchCmd"
                        :appInfo="appInfo"
                        :isCollapse="false"
                        :currentAppId="currentAppId"
                        :isYijingCloud="isYijingCloud"
                        :isYijingStandard="isYijingStandard"
                        :isYijingPortal_4="isYijingPortal_4"
                        :isYijingWPS="isYijingWPS"
                        :showUseCustomMenuSwitch="showUseCustomMenuSwitch"
          ></app-resource>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <NPS :npsCode="npsData"></NPS>
  </div>
</template>
<script  lang="ts">
import {defineComponent, ref, getCurrentInstance, toRefs, reactive, onMounted, nextTick} from "vue";

import NavHome from "@/views/home/NavHome.vue";
import MobileHome from "@/views/home/MobileHome.vue";
import AppResource from "@/views/mobile/AppResource.vue";
export default defineComponent({
  name: 'MainHome',
  components: {NavHome, MobileHome, AppResource},
  props: {},
  setup(props: any, ctx:any) {
    const instance = getCurrentInstance(), globalProperties = instance?.appContext.config.globalProperties,
        awsuiTools = globalProperties?.awsuiTools,
        storeData = globalProperties?.$store.state, {proxy: $this}: any = instance;
    const settingParam = instance?.appContext.config.globalProperties.AWSPageContext?.settingParam;

    const state:any = reactive({
      height: (document.documentElement.clientHeight) + 'px',
      appResourceHeight: (document.documentElement.clientHeight - 55) + 'px',
      clientWidth: document.documentElement.clientWidth,
      activeName: "first",
      currentAppId: settingParam.currentAppId,
      currentNavId: settingParam.currentNavId,
      appInfo: {},
      hasManagerAC: settingParam.hasManagerAC,
      isSubAdmin: settingParam.isSubAdmin,
      haveWorkbenchCmd: settingParam.haveWorkbenchCmd,
      isYijingCloud: settingParam.isYijingCloud,
      isYijingStandard: settingParam.isYijingStandard,
      isYijingPortal_4: settingParam.isYijingPortal_4,
      isYijingWPS: settingParam.isYijingWPS,
      showUseCustomMenuSwitch:settingParam.showUseCustomMenuSwitch,
      npsData:"NPS20501",
      isHighSecurity:settingParam.isHighSecurity,
      showMobileEntry:settingParam.showMobileEntry,
    });


    const methods = {
      hidePopOver() {
        $this.$refs.navhome.hidePopOver();
        if (state.currentAppId == "") {
          if ($this.$refs.mobilehome != undefined) {
            $this.$refs.mobilehome.hidePopOver();
          }
        }

      },
      handleNavTabClick() {
        nextTick(()=>{
          let activeItem = document.querySelector('.el-tabs__item.is-active');
          let activeBar = document.querySelector('.navigation-wrap-panel .el-tabs__active-bar');
          activeBar.className = activeBar.className.replace("firstWidth", "").replace("secondWidth", "");
          if (activeItem.id == "tab-first") {
            activeBar.className += ' firstWidth';
          } else {
            activeBar.className += ' secondWidth';
          }
        })

        nextTick(()=>{
          if (document.querySelector('.el-tabs__header') != undefined) {
            document.querySelector('.el-tabs__header').addEventListener('mouseleave', function (e) {
              console.log("mouseleave");
              methods.hidePopOver();
            })
          }
        });
      },
      getCurrentAppInfo(appId:any) {
        let data = {
          url: 'jd',
          data: {
            cmd: 'CONSOLE_P_NAV_GET_APP_INFO',
            sid: settingParam.sessionId,
            appId: appId
          }
        };
        // 查询数据
        $this.awsuiaxios.post(data).then(function (ro:any) {
          if (ro.result == "ok") {
            state.appInfo = ro.data.appInfo;
            console.log(state.appInfo);
          }
        });
      }

    }

    onMounted(() => {
      if(!state.isHighSecurity){
        methods.handleNavTabClick();
      }
      if (state.currentAppId != "") {
        methods.getCurrentAppInfo(state.currentAppId);
      }
      document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === 'visible') {//页面显示的时候刷新列表
          methods.hidePopOver();
        }
      });
    });
     return {
      ...toRefs(state),
      ...methods,
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
});
</script>

<style>
.navigation-wrap-panel {
  height: 100%;
}
.navigation-wrap-panel .el-tabs__nav-wrap:after {
  height: 1px !important;
}

.navigation-wrap-panel .el-tabs__active-bar {
  height: 1px !important;
}

.el-tabs--left .el-tabs__header.is-left:after {
  width: 1px !important;
}

el-tabs__active-bar.is-left {
  width: 1px !important;
}

.el-tabs__active-bar.firstWidth {
  width: 50px !important;
  transform: translateX(5px) !important;
}

.el-tabs__active-bar.secondWidth {
  width: 60px !important;
  transform: translateX(107px) !important;
}

.el-tabs__nav.is-top {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.el-tabs__item{
  font-weight: normal !important;
}

.el-overlay.is-message-box {
  display: block !important;
}

.el-overlay .el-drawer.rtl {
  -webkit-animation: none !important;
  animation: none !important;
  right: 0 !important;
}

</style>
<style lang="less">
.ch-nps-remind-overview{
  div:first-child {
    display: flex;
    flex-direction: column;

    .right-down-1.el-dialog {
      display: flex;
      flex-direction: column;
      width: 17.6vw!important;
      max-height: calc(17.6vw * 1.15)!important;
      min-width: 280px;
      min-height: 322px;
      margin-right: 20px!important;
      margin-bottom: 20px!important;


    }
    .right-down-2.el-dialog {
      display: flex;
      flex-direction: column;
      width: 24vw!important;
      max-height: calc(24vw * 1.15)!important;
      min-width: 300px;
      min-height: 345px;
      margin-right: 20px!important;
      margin-bottom: 20px!important;
    }
    .middle-1.el-dialog {
      display: flex;
      flex-direction: column;
      width: 37.3vw!important;
      max-height: calc(37.3vw / 1.35)!important;
      min-width: 460px;
      min-height: 341px;
    }
    .middle-2.el-dialog {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 80vw!important;
      max-height: calc(80vw / 1.82)!important;
      min-width: 800px;
      min-height: 442px;
    }
  }
}

.ch-nps-survey-overview {
  div {
    top: auto !important;
    bottom: 1px !important;

    .ch-nps-survey-dialog {
      display: flex!important;
      flex-direction: column!important;
      margin-right: 0!important;
      margin-bottom: 0!important;
      width: 35.4vw !important;
      min-width: 449px;
      max-height: calc(50vh + 20px) !important;
      min-height: 25vh!important;
      overflow: hidden!important;
    }
  }
}

.nps .el-overlay .el-overlay-dialog .login-dialog .el-dialog__body .container .right-content .basic-info .basic-main .el-form .el-form-item .el-form-item__content .phone-input .el-input__inner {
  border: none;
}
.nps .el-overlay .el-overlay-dialog .login-dialog .el-dialog__body .container .right-content .details-box .box-main .el-form .el-form-item .el-form-item__content .el-input .el-input__inner{
  box-shadow: none;
}
</style>